<template>
  <div id="monthPay"></div>
</template>

<script>
import echarts from "echarts" 
require('echarts/theme/macarons');

import { getNearMonthPayInfo } from "@/api/dashboard";
export default {
  data() {
    return {
      //月份数组
      monthList: [],
      //成交金额数组
      payList: [],
    };
  },

  methods: {
    drawLine(monthList, payList) {
      console.log("进入月份数据", monthList);

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("monthPay"));

      // 绘制图表
      myChart.setOption({
        title: { text: "近6个月订单的成交额" },
        tooltip: {},
        xAxis: {
          data: monthList,
        },
        yAxis: {},
        series: [
          {
            name: "成交额",
            type: "bar",
            data: payList,
          },
        ],
      });
    },
  },
  // 计算属性
  //   mounted() {
  //     // 绘制柱状图
  //     this.drawLine(this.monthList, this.payList);
  //   },

  created() {
    getNearMonthPayInfo()
      .then((result) => {
        for (var item of result.data) {
          this.monthList.push(item.yearMonth);
          this.payList.push(item.count);
          // 绘制柱状图
          this.drawLine(this.monthList, this.payList);
        }
      })
      .catch((err) => {});
  },
};
</script>

<style>
#monthPay {
  height: 400px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
</style>